<!doctype html>
<html lang="en">
  <head>
    <title>喜茶订单平台</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
      <link href="src/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="src/assets/js/ie8-responsive-file-warning.js"></script>
      <!-- Custom styles for this template -->
      <link href="src/css/carousel.css" rel="stylesheet">

    <style>
        .finish{
            text-decoration-line: line-through;
        }
    </style>

 </head>
  <body>
<!--      &lt;!&ndash; padding内边距 &ndash;&gt;-->
<!--   <div class="jumbotron jumbotron-fluid bg-success text-white p-1">-->
<!--    <img src="img/a_ch2.png" alt="喜茶"  width="1300" height="200">-->
<!--       <div class="container">-->
<!--           <h1 class="display-3">喜茶</h1>-->
<!--           <p class="lead">订单平台</p>-->
<!--       </div>-->
<!--   </div>-->

      <!--  在页面主体中设计一个图片幻灯 -->
      <div id="id-carousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
              <li data-target="#id-carousel" data-slide-to="0" class="active"></li>
              <li data-target="#id-carousel" data-slide-to="1"></li>
              <li data-target="#id-carousel" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
                  <img src="img/a_banner.jpg" alt="First slide">
                  <div class="container">
                      <div class="carousel-caption">
                          <h1 class="display-3">喜茶</h1>
                          <p class="lead">订单平台</p>
                      </div>
                  </div>
              </div>
              <div class="carousel-item">
                  <img src="img/a_ch2.png" alt="Second slide">
                  <div class="container">
                      <div class="carousel-caption">
                          <h1 class="display-3">喜茶</h1>
                          <p class="lead">订单平台</p>
                      </div>
                  </div>
              </div>
              <div class="carousel-item">
                  <img src="img/bg1.jpg" alt="Third slide">
                  <div class="container">
                      <div class="carousel-caption">
                          <h1 class="display-3">喜茶</h1>
                          <p class="lead">订单平台</p>
                      </div>
                  </div>
              </div>
          </div>
          <a class="left carousel-control" href="#id-carousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#id-carousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
          </a>
      </div><!-- carousel end -->
   

   <!-- v-for 循环遍历 -->
   <div class="container-fluid" id="app">
       <div class="row">
           <!-- 饮品添加 -->
           <div class="col-md-6">
               <div class="card">
                 <!-- 加下拉框b4-selecte -->
                 <div class="form-group">
                   <label for="" style="color:orangered;">[饮品]</label>
                   <select class="form-control" v-model="drink" >
                    <option v-for="(item,index) in drinks" :key="index" 
                    :value="item.title">{{item.title}}
                    </option>

                     <!-- <option>满杯百香果</option>
                     <option>多肉葡萄</option>
                     <option>桂花乌龙</option>
                     <option>奥利奥抹茶</option>
                     <option>松露可可</option> -->
                   </select>
                 </div>

                 <!-- 单选框 杯型-->
                 <div class="form-group">
                    <label for="" style="color: orangered;">[杯型]</label>
                    <div>
                        <div class="form-check form-check-inline" v-for="(item,index) in cups" :key="index" >
                            <input class="form-check-input" v-model="cup"
                            type="radio"  :value="item">
                            <label class="form-check-label"> {{item}} </label>
                        </div>
                    </div>
                </div>

                <!-- 单选框 甜度 -->
                <div class="form-group">
                    <label for="" style="color: orangered;">[甜度]</label>
                    <div>
                        <div class="form-check form-check-inline" v-for="(item,index) in sugars" :key="index" >
                            <input class="form-check-input" v-model="sugar"
                             type="radio"  :value="item">
                            <label class="form-check-label"> {{item}} </label>
                        </div>
                    </div>
                </div>

                <!-- 单选框 温度 -->
                <div class="form-group">
                    <label for="" style="color: orangered;">[温度]</label>
                    <div>
                        <div class="form-check form-check-inline" v-for="(item,index) in temps" :key="index" >
                            <input class="form-check-input" v-model="temp"
                            type="radio"  :value="item">
                            <label class="form-check-label"> {{item}} </label>
                        </div>
                    </div>
                </div>

                <!-- 多选框  -->
                <div class="form-group">
                    <label style="color: orangered;">[配料]</label>
                    <div>
                       <div class="form-check form-check-inline" v-for="(item,index) in batching" :key="index">
                           <label class="form-check-label">
                               <input class="form-check-input" v-model="batch"
                               type="checkbox"  :value="item"> {{item}}
                           </label>
                       </div>
                    </div>
                </div>

                <!-- 按钮  触发点击事件-->
                <!-- mt-3即是margin-top -->
                <div>
                <button type="button"  @click="order()"
                class="btn btn-primary btn-lg btn-block mt-3">
                    立即下单
                </button>
                </div>
               </div>
           </div>
           <!-- 表格 -->
           <div class="col-md-6" >
                <table class="table">
                    <thead>
                        <tr>
                            <th>饮品</th>
                            <th>杯型</th>
                            <th>糖</th>
                            <th>温度</th>
                            <th>配料</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  v-for="(item,index) in teaList" :class="item.finish?'':'text-danger finish'" :key="index">
                            <td scope="row">{{item.drink}}</td>
                            <td>{{item.sugar}}</td>
                            <td>{{item.cup}}</td>
                            <td>{{item.temp}}</td>
                            <td>
                                <span class="badge badge-pill badge-danger ml-2" 
                                v-for="(itembatch,index) in item.batch" :key="index">{{itembatch}}</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary" @click="finish(index)">出货</button>
                            </td>
                            
                        </tr>
                    </tbody>
                </table>
           </div>
       </div>
   </div>

    <!-- 引用vue.js 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 渲染式声明 -->
    <script>
        let vm = new Vue({
            el:"#app",
            data:{ //数据
                drinks:[  //饮品
                    {
                        id:0,title:"满杯百香果"
                    },
                    {
                        id:1,title:"多肉葡萄"
                    },
                    {
                        id:2,title:"奥利奥抹茶"
                    },
                    {
                        id:3,title:"桂花乌龙"
                    },
                    {
                        id:4,title:"松露可可"
                    }
                ],
                cups:["超大杯","中杯","小杯"],  //杯型
                sugars:["无糖","半糖","少糖","正常甜度"],  //甜度
                temps:["常温","加冰"],  //温度
                batching:["红豆","珍珠","椰果","牛奶"],  //配料
                drink:"2",
                cup:"",
                sugar:"",
                temp:"",
                batch:[],
                teaList:[],
            },
            methods:{
                order:function(){  //下单
                    // alert(this.batch+","+this.cup);   //弹窗
                    this.teaList.push({
                        drink:this.drink,
                        cup:this.cup,
                        sugar:this.sugar,
                        temp:this.temp,
                        batch:this.batch,
                        finish:true  //false-未出货 true-出货 
                    })
                    console.log(this.teaList)
                },
                finish:function(index){
                    item.finish=false; //已出货
                },
            },
        })
    </script>

<script src="src/js/jquery-1.9.1.js"></script>
<script src="src/dist/js/bootstrap.min.js"></script>
<script src="src/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="src/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>